<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#text{
				font-size: 13px;
			}
			.error{
				background: url(img/error.png) no-repeat 5px center;
				background-size: 15px 15px;
				color: red !important;
				padding-left: 20px;
				font-size: 15px;
			}
			.right{
				background: url(img/right.png) no-repeat 5px center;
				background-size: 15px 15px;
				color: green !important;
				padding-left: 20px;
				font-size: 15px;
			}
			
		</style>
	</head>
	<body>
		<div id="box">
			<label>您的成绩:</label>
			<input type="text" id="text" placeholder="请输入你的成绩"/>
			<span id="span">请输入你的成绩！</span>
			</div>
			
		<script>
			window.onload=function(){
				var box = document.getElementById("box")
				var text = document.getElementById("text")
				var span = document.getElementById("span")
				
			    text.onfocus = function(){
					this.style.borderColor = 'blue';
				}
				text.onblur = function(){
				  var val = parseInt(text.value);
				         if(isNaN(val)){
					span.innerText = '快输入你的成绩';}
					    else if(val <= 150 && val >= 0){
						span.className = 'right';
						span.innerText = '你还挺厉害';}
					else{
						span.className = 'error';
						span.innerText = '傻瓜，输入的啥玩意';
			}  
				}
			};
			
			function $(id){
				return typeof id =="string"?document.getElementById(id):null;
			}
		</script>
	</body>
	
</html>
